import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { getOrderSummary, queryContries, queryUsers } from '@/services/ant-design-pro/api';
import { Button, Card, Col, Divider, Row, Select, Statistic } from 'antd';
import { useAccess, Access } from 'umi';
import ProCard from '@ant-design/pro-card';
import RcResizeObserver from 'rc-resize-observer';
import { LightFilter, ProFormSelect } from '@ant-design/pro-form';
import { contrySelectRequest, userSelectRequest } from './common';


export default () => {
    const [data, setData] = useState({ today: {}, total: {} })
    const [responsive, setResponsive] = useState(false);
    const access = useAccess();

    const requetOrderSummary = async (params) => {
        let result = await getOrderSummary(params);
        setData(result.data)
        console.log(result.data)
    }


    useEffect(() => {
        console.log("dashboard access", access)
        requetOrderSummary({})
    }, [])
    return (
        <PageContainer>
            <LightFilter
                onFinish={requetOrderSummary}
            >
                <ProFormSelect name="country" label="国家" request={contrySelectRequest} width={"md"} />
                {
                    access?.isAdmin && (<ProFormSelect name="username" label="销售员" request={userSelectRequest} />)
                }
            </LightFilter>

            <RcResizeObserver
                key="resize-observer"
                onResize={(offset) => {
                    setResponsive(offset.width < 596);
                }}
            >
                <div>
                    <ProCard.Group title="今日指标" direction={responsive ? 'column' : 'row'}>
                        <ProCard>
                            <Statistic title="应收金额" value={data.today.total_price} />
                        </ProCard>
                        <Divider type={responsive ? 'horizontal' : 'vertical'} />
                        <ProCard>
                            <Statistic title="交易数" value={data.today.count} />
                        </ProCard>
                        <Divider type={responsive ? 'horizontal' : 'vertical'} />
                        <ProCard>
                            <Statistic title="收款额" value={data.today.total_pay} />
                        </ProCard>
                        <Divider type={responsive ? 'horizontal' : 'vertical'} />
                        <ProCard>
                            <Statistic title="返点额" value={data.today.total_return} />
                        </ProCard>
                        <ProCard>
                            <Statistic title="退款额" value={data.today.total_refuend} />
                        </ProCard>
                        <ProCard>
                            <Statistic title="利润" value={data.today.total_profit} />
                        </ProCard>
                    </ProCard.Group>
                    <ProCard.Group title="累计指标" direction={responsive ? 'column' : 'row'}>
                        <ProCard>
                            <Statistic title="总金额" value={data.total.total_price} />
                        </ProCard>
                        <Divider type={responsive ? 'horizontal' : 'vertical'} />
                        <ProCard>
                            <Statistic title="交易数" value={data.total.count} />
                        </ProCard>
                        <Divider type={responsive ? 'horizontal' : 'vertical'} />
                        <ProCard>
                            <Statistic title="收款额" value={data.total.total_pay} />
                        </ProCard>
                        <Divider type={responsive ? 'horizontal' : 'vertical'} />
                        <ProCard>
                            <Statistic title="返点额" value={data.total.total_return} />
                        </ProCard>
                        <ProCard>
                            <Statistic title="退款额" value={data.total.total_refuend} />
                        </ProCard>
                        <ProCard>
                            <Statistic title="利润" value={data.total.total_profit} />
                        </ProCard>
                    </ProCard.Group>
                </div>

            </RcResizeObserver>

        </PageContainer >
    );
};



